// 账户安全
<template>
  <!-- 账户安全 -->
  <div class="AccountSecurity">
    <ul>
      <li>
        <span v-if="$store.state.UserInfor.username" class="el-icon-circle-check"></span>
        <bdi v-else class="el-icon-circle-close"></bdi>
        <i>密码登陆</i>
        <p>安全性高的密码可以使账号更安全。建议您定期更换密码，且设置一个包含数字和字母，并长度超过6位以上的密码。</p>
        <el-button type="text" @click="dialogFormVisible1 = true">修改</el-button>
        <el-dialog width="40%" title="修改密码" :visible.sync="dialogFormVisible1" append-to-body>
          <el-form :model="form1" ref="Password" label-width="150px" class="demo-dynamic">
            <el-form-item
              prop="newPassword"
              label="新密码："
              :rules="[{ required: true, message: '密码不能为空...', trigger: 'blur' }]"
            >
              <el-input v-model="form1.newPassword"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="warning" size="small" :disabled="disabled1" @click="modify">提 交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </li>
      <li>
        <span v-if="$store.state.doSelfInfos.phone" class="el-icon-circle-check"></span>
        <bdi v-else class="el-icon-circle-close"></bdi>
        <i>手机验证</i>
        <p>
          <span
            v-show="$store.state.doSelfInfos.phone"
            style="
              display: inline-block;
              width:260px; 
              background: #ddd; 
              margin:0; 
              margin-right:30px;
              text-align: center"
          >{{ phone }}</span>
          <b v-if="$store.state.doSelfInfos.phone">(已验证)</b>
          <b v-else>未进行验证......</b>
        </p>
        <el-button type="text" @click="RebindCellPhone">重新绑定手机</el-button>

        <el-dialog width="40%" title="修改密码" :visible.sync="dialogFormVisible2" append-to-body>
          <el-form :model="form2" ref="phone" label-width="150px" class="demo-dynamic">
            <el-form-item
              prop="tel"
              label="新的手机号："
              :rules="[{ required: true, message: '手机号不能为空...', trigger: 'blur' }]"
            >
              <el-input v-model="form2.tel"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="warning" size="small" @click="SendMobileCode">发送手机验证码</el-button>
            </el-form-item>
            <el-form-item
              prop="MobileCode"
              label="验证码："
              :rules="[{ required: true, message: '验证码不能为空...', trigger: 'blur' }]"
            >
              <el-input v-model="form2.MobileCode"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="warning" size="small" :disabled="disabled2" @click="BindPhone">提 交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </li>
      <li>
        <span v-if="$store.state.doSelfInfos.mail" class="el-icon-circle-check"></span>
        <bdi v-else class="el-icon-circle-close"></bdi>
        <i>绑定邮箱</i>
        <p>
          <span
            v-show="$store.state.doSelfInfos.mail"
            style="
              display: inline-block;
              width:260px; 
              background: #ddd; 
              margin:0; 
              margin-right:30px;
              text-align: center
              "
          >***@***</span>
          <b v-if="$store.state.doSelfInfos.mail">(已验证)</b>
          <b v-else>(未绑定)</b>
        </p>
        <el-button type="text" @click="outerVisible = true">绑定邮箱 >></el-button>
      </li>
    </ul>

    <el-dialog title="绑定邮箱" :visible.sync="outerVisible">
      <el-form :model="form3" ref="form3" label-width="100px" class="demo-dynamic">
        <el-form-item
          prop="email"
          label="邮箱"
          :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ]"
        >
          <el-input v-model="form3.email"></el-input>
        </el-form-item>
      </el-form>
      <el-dialog width="40%" title="请输入验证码" :visible.sync="innerVisible" append-to-body>
        <el-form :model="Mailbox" ref="Mailbox" label-width="100px" class="demo-dynamic">
          <el-form-item
            prop="MailboxCode"
            label="验证码："
            :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]"
          >
            <div style="display:flex;flex-direction:row">
              <el-input v-model="Mailbox.MailboxCode"></el-input>
              <el-button @click="confirm">确定</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>

      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <!-- <el-button type="primary" @click="innerVisible = true">发送验证邮件</el-button> -->
        <el-button type="primary" @click="submitForm">发送验证邮件</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "AccountSecurity",
  data() {
    return {
      // 账户安全
      phone: "", // 电话号
      // suc: 0, // 小图标的显示验证之和验证之后
      binds: 1, // 未绑定状态
      code: "",

      dialogFormVisible1: false, // 密码修改
      form1: {
        password: "",
        newPassword: ""
      },
      disabled1: false, // 修改密码的按钮的点击与否

      dialogFormVisible2: false, // 绑定手机修改
      form2: {
        tel: "",
        MobileCode: ""
      },
      disabled2: false,

      outerVisible: false, // form3 外层
      innerVisible: false, // form3 验证码层
      dialogFormVisible3: false, // 绑定邮箱
      form3: {
        email: ""
      },
      // 邮箱验证码
      Mailbox: {
        MailboxCode: ""
      },

      formLabelWidth: "120px",
    }
  },

  methods: {
    // 重新绑定手机
    async RebindCellPhone() {
      this.dialogFormVisible2 = true
      let status = "phone"
      let user_id = this.$store.state.UserInfor.user_id
      let smscode = this.form2.MobileCode
      let param = {}
      param.phone = this.form2.tel
      let res = await this.$http({
        method: "post",
        url: "/api/index/web/accountSecurity",
        data: {
          user_id,
          status,
          smscode,
          param
        }
      })
      console.log(res)
    },
    // 修改密码
    async modify() {
      let status = "pwd"
      let user_id = this.$store.state.UserInfor.user_id
      let param = {}
      param.pwd = this.form1.newPassword

      console.log(status, user_id, param)
      let newPassword = await this.$http({
        method: "post",
        url: "/api/index/web/accountSecurity",
        data: {
          user_id,
          status,
          param
        }
      })
      console.log(newPassword)
      if (newPassword.status == 200) {
        this.$notify({
          title: '成功',
          message: '修改密码成功...',
          type: 'success'
        })
        this.dialogFormVisible1 = false
      }
    },
    // 发送手机验证码
    async SendMobileCode() {
      let phone = this.form2.tel
      let res = await this.$http({
        method: "post",
        url: "/api/index/common/sendMsg",
        data: {
          phone,
          code: 'SMS_143540005 '   // 暂时用注册的手机验证码  后期应该会更改
        }
      })
      console.log(res)
    },
    // 修改手机号 提交
    async BindPhone() {
      let status = "phone"
      let user_id = this.$store.state.UserInfor.user_id
      let smscode = this.form2.MobileCode
      let param = {}
      param.phone = this.form2.tel
      console.log(status, user_id, smscode, param)
      let newPhone = await this.$http({
        method: 'post',
        url: '/api/index/web/accountSecurity',
        data: {
          status,
          user_id,
          smscode,
          param
        }
      })
      if (newPhone.data.State.Code == 200) {
        this.dialogFormVisible2 = false
        this.$notify({
          title: '成功',
          message: '修改手机成功...',
          type: 'success'
        })
      } else if (newPhone.data.State.Code == 1600) {
        this.$notify({
          title: '验证码已过期',
          message: '请重新发送验证码...',
          type: 'success'
        })
      }
    },

    // 信息安全的 发送验证邮箱
    async submitForm() {
      let user_id = this.$store.state.UserInfor.user_id
      console.log(this.form3.email, user_id)
      let res = await this.$http({
        method: "post",
        url: `/api/index/api/sendMail`,
        headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
        data: {
          user_id,
          mail: this.form3.email
        }
      })
      console.log(res.data.includes('"Code":"200"'))
      if (res.data.includes('"Code":"200"')) {
        this.innerVisible = true
        this.$notify({
          title: '已将验证码发送到您的邮箱',
          message: '请登录邮箱进行查收...',
          type: 'success'
        })
      } else if (res.data.includes('"Code":"2010"')) {
        this.$notify({
          title: '已绑定邮箱...',
          type: 'warning'
        })
      } else if (res.data.includes('"Code":"2011"')) {
        this.$notify({
          title: '邮箱已使用...',
          type: 'warning'
        })
      }
      // if(res.data.State.Code == 200){
      //   this.innerVisible = true
      //   this.$notify({
      //     title: '已将验证码发送到您的邮箱',
      //     message: '请登录邮箱进行查收...',
      //     type: 'success'
      //   })
      // } else if(res.data.State.Code == 2010){
      //   this.$notify({
      //     title: '已绑定邮箱...',
      //     type: 'warning'
      //   })
      // } else if(res.data.State.Code == 2011){
      //   this.$notify({
      //     title: '邮箱已使用...',
      //     type: 'warning'
      //   })
      // }
    },
    // 邮箱验证码确认
    async confirm() {
      let status = "email"
      let user_id = this.$store.state.UserInfor.user_id
      let code = this.Mailbox.MailboxCode // 邮箱状态码
      let param = {}
      param.mail = this.form3.email
      console.log(status, user_id, code, param)
      let res = await this.$http({
        method: "post",
        url: `/api/index/web/accountSecurity`,
        headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
        data: {
          status,
          user_id,
          code,
          param
        }
      })
      // 没有写完 后续上一个接口好用了之后再继续写
      if (res.data.State.Code == 200) {
        console.log(res)
        this.outerVisible = false
        this.innerVisible = false
        this.dialogFormVisible3 = false
        // this.$store.commit("doSelfInfos", res.data.data)
        let myStatus = "user"
        try {
          this.$http({
            method: "post",
            url: "/api/index/web/doSelfInfos",
            data: {
              user_id,
              status: myStatus
            }
          })
            .then(res => {
              if (res.data.State.Code == 200) {
                // console.log(res.data)
                this.$store.commit("UserName", res.data.data.name)
                this.$store.commit("doSelfInfos", res.data.data)
                this.$notify({
                  title: '绑定邮箱成功',
                  type: 'success'
                })
              }
            })
            .catch(err => {
              console.log(err)
            })
        } catch (error) {
          console.log("安全的接口出现问题...")
        }


      }
    },

    // 数据更新
    dataInit() {

      let _info = this.$store.state.doSelfInfos
      let _phone = [..._info.phone] // 字符串转换成数组
      for (let i = 3; i <= 6; i++) {
        _phone[i] = "*"
      }
      let myPhone = _phone.join("") // 装换成字符串
      this.phone = myPhone
    }
  },

  mounted() {
    this.dataInit()
  }
}
</script>

<style lang="scss" scoped>
// 账户安全
.AccountSecurity {
  ul {
    li {
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px dashed #cccccc;
      width: 800px;
      margin: auto;
      padding: 20px 0px;

      span {
        font-size: 18px;
        color: #ff7200;
        margin-right: 20px;
        margin-left: 80px;
      }
      bdi {
        color: #d9d9d9;
        margin-right: 20px;
        margin-left: 80px;
        font-size: 18px;
      }
      i {
        font-weight: bold;
        margin-right: 72px;
      }
      p {
        width: 380px;
        margin-right: 60px;
        b {
          color: #cccccc;
        }
      }
    }
  }
  .el-dialog__wrapper {
    /deep/ .el-dialog__body {
      padding: 30px 100px;
      .el-input:last-child {
        padding-right: 60px;
      }
    }
  }
}
</style>